<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Graphic Line</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .graphic-layer {
            margin: 0 auto;
            position: relative;
            top: 0;
            left: 0;
            z-index: 1;
        }
        .graphic-layer img {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
        }
        .graphic-layer .canvas-holder {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 2;
        }
    </style>
</head>
<body>
    <div class="graphic-layer">
        {% if items.line_name == 'G6' %}
        <img src="{{ url_for('static', filename = 'images/Linie_G6-02.png', _external = True) }}"/>
        {% else %}
        <img src="{{ url_for('static', filename = 'images/Linie_Z6-02.png', _external = True) }}"/>
        {% endif %}
        <div class="canvas-holder" id="canvasHolder"></div>
    </div>
    <script>var line_name = '{{ items.line_name }}';</script>
    <script src="{{ url_for('static', filename = 'js/libs/jquery-1.12.0.min.js', _external = True) }}"></script>
    <script src="{{ url_for('static', filename = 'js/libs/raphael.min.js', _external = True) }}"></script>
    <script src="{{ url_for('static', filename = 'js/page/gline.js', _external = True) }}"></script>
</body>
</html>